<template>
    <div _tmplitem="66" class="dv-full-screen-container" :style="css">
        <div _tmplitem="66" style="position: absolute;width:1920px;height:1080px; background-image: url(http://f.kyform.cn/2023-05-05/36d1a62a-e49e-4c4f-86ad-bef8d5286fd2.png); background-size: contain;background-color:rgba(13, 42, 67);">
            <div _tmplitem="66" class="bigitem" style="top: 176px; left: 456px; width: 396px; height: 198px; transform: translate(0px, 0px); z-index: 1010;">
                <div _tmplitem="66" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="56" ref="sel16832969755920" :options="fromData.sel16832969755920"></myechart>
                </div>
            </div>
            <div _tmplitem="66" class="bigitem" style="top: 272px; left: 114px; width: 214px; height: 40px; transform: translate(0px, 0px); z-index: 109;">
                <div _tmplitem="66" class="itemcontent " style="opacity:1;font-size:26px ;color:rgb(255, 255, 255) ;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:rotateZ(0deg)rotateY(0deg)   rotateX(0deg) ;">
                    <dv-digital-flop ref="sel168329773347369" :config="fromData.sel168329773347369" style="width:214px;height:40px"> </dv-digital-flop>
                </div>
            </div>
            <div _tmplitem="66" class="bigitem" style="top: 54px; left: 800px; width: 300px; height: 50px; transform: translate(0px, 0px); z-index: 108;">
                <div _tmplitem="66" class="itemcontent " style="opacity:1;font-size:14px ;color:rgb(255, 255, 255) ;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <titlecontrol _tmplitem="58" ref="sel168329742862997" :w="300" :h="50" :val="fromData.sel168329742862997" cssstyle="color: rgb(255, 255, 255); overflow: unset; text-overflow: unset; white-space: unset; background-image: none; background-clip: unset; -webkit-text-fill-color: initial;white-space:nowrap;"></titlecontrol>
                </div>
            </div>
            <div _tmplitem="66" class="bigitem" style="top: 168px; left: 698px; width: 1140px; height: 468px; transform: translate(0px, 0px); z-index: 107;">
                <div _tmplitem="66" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="59" ref="sel168329739571261" :options="fromData.sel168329739571261"></myechart>
                </div>
            </div>
            <div _tmplitem="66" class="bigitem" style="top: 690px; left: 1349px; width: 517px; height: 339px; transform: translate(0px, 0px); z-index: 106;">
                <div _tmplitem="66" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="60" ref="sel168329732049140" :options="fromData.sel168329732049140"></myechart>
                </div>
            </div>
            <div _tmplitem="66" class="bigitem" style="top: 696px; left: 645px; width: 690px; height: 340px; transform: translate(0px, 0px); z-index: 105;">
                <div _tmplitem="66" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="61" ref="sel168329723799127" :options="fromData.sel168329723799127"></myechart>
                </div>
            </div>
            <div _tmplitem="66" class="bigitem" style="top: 707px; left: 66px; width: 533px; height: 323px; transform: translate(0px, 0px); z-index: 104;">
                <div _tmplitem="66" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="62" ref="sel168329720491933" :options="fromData.sel168329720491933"></myechart>
                </div>
            </div>
            <div _tmplitem="66" class="bigitem" style="top: 417px; left: 450px; width: 354px; height: 192px; transform: translate(0px, 0px); z-index: 103;">
                <div _tmplitem="66" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="63" ref="sel168329713466813" :options="fromData.sel168329713466813"></myechart>
                </div>
            </div>
            <div _tmplitem="66" class="bigitem" style="top: 426px; left: 73px; width: 337px; height: 200px; transform: translate(0px, 0px); z-index: 102;">
                <div _tmplitem="66" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="64" ref="sel16832970455726" :options="fromData.sel16832970455726"></myechart>
                </div>
            </div>
            <div _tmplitem="66" class="bigitem" style="top: 178px; left: 248px; width: 382px; height: 198px; transform: translate(0px, 0px); z-index: 101;">
                <div _tmplitem="66" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="65" ref="sel168329701648200" :options="fromData.sel168329701648200"></myechart>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import myechart from '@/components/myechart/newindex.vue'
import titlecontrol from '@/components/titlecontrol.vue'
import horseindex from '@/components/horseindex.vue'
import textareaindex from '@/components/textareaindex.vue'
import backgroundunit1 from '@/components/backgroundunit/backgroundunit1.vue'
import backgroundunit2 from '@/components/backgroundunit/backgroundunit2.vue'
import backgroundunit3 from '@/components/backgroundunit/backgroundunit3.vue'
import backgroundunit4 from '@/components/backgroundunit/backgroundunit4.vue'
import backgroundunit5 from '@/components/backgroundunit/backgroundunit5.vue'
import backgroundunit7 from '@/components/backgroundunit/backgroundunit7.vue'
import backgroundunit8 from '@/components/backgroundunit/backgroundunit8.vue'
import backgroundunit9 from '@/components/backgroundunit/backgroundunit9.vue'
import backgroundunit10 from '@/components/backgroundunit/backgroundunit10.vue'
import backgroundunit11 from '@/components/backgroundunit/backgroundunit11.vue'
import backgroundunit12 from '@/components/backgroundunit/backgroundunit12.vue'
import myfabric from '@/components/myfabric/hotspot.vue'
import bigimg from '@/components/bigImg.vue'
import scrollgridlist from '@/components/scrollgridlist/index.vue'
import scrollgridcolumn from '@/components/scrollgridlist/scrollgridcolumn.vue'
export default {
    data() {
        return {
            w: 1920,
            css: '',
            h: 1080,
            bg: 'http://f.kyform.cn/2023-05-05/36d1a62a-e49e-4c4f-86ad-bef8d5286fd2.png',
            bgColor: 'rgba(13, 42, 67)',
            fromData: {
                sel16832969755920: {
                    title: {
                        text: '',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 16,
                            color: '#fff',
                        },
                    },
                    series: [
                        {
                            type: 'liquidFill',
                            radius: '45%',
                            center: ['50%', '50%'],
                            data: [0.5, 0.5, 0.5],
                            backgroundStyle: {
                                borderWidth: 1,
                                color: 'rgb(255,0,255,0.1)',
                            },
                            label: {
                                normal: {
                                    formatter: '70.00%',
                                    textStyle: {
                                        fontSize: 20,
                                        color: '#fff',
                                    },
                                },
                            },
                            outline: {
                                show: false,
                            },
                        },
                        {
                            type: 'pie',
                            center: ['50%', '50%'],
                            radius: ['50%', '52%'],
                            hoverAnimation: false,
                            data: [
                                {
                                    name: '',
                                    value: 500,
                                    labelLine: {
                                        show: false,
                                    },
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                    emphasis: {
                                        labelLine: {
                                            show: false,
                                        },
                                        itemStyle: {
                                            color: 'rgb(124, 255, 178)',
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: 4,
                                    labelLine: {
                                        show: false,
                                    },
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                        normal: {
                                            color: 'rgb(124, 255, 178)',
                                            borderColor: '#5886f0',
                                            borderWidth: 20,
                                        },
                                    },
                                    label: {
                                        borderRadius: '100%',
                                    },
                                    emphasis: {
                                        labelLine: {
                                            show: false,
                                        },
                                        itemStyle: {
                                            color: 'rgb(124, 255, 178)',
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: 4,
                                    labelLine: {
                                        show: false,
                                    },
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                    emphasis: {
                                        labelLine: {
                                            show: false,
                                        },
                                        itemStyle: {
                                            color: 'rgb(124, 255, 178)',
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: 88,
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                    label: {
                                        show: false,
                                    },
                                    labelLine: {
                                        show: false,
                                    },
                                    emphasis: {
                                        labelLine: {
                                            show: false,
                                        },
                                        itemStyle: {
                                            color: 'rgb(124, 255, 178)',
                                        },
                                    },
                                },
                            ],
                        },
                    ],
                },
                sel168329773347369: {
                    number: [13432432],
                    content: '{nt}元',
                },
                sel168329742862997: '销售可视化大屏',
                sel168329739571261: {
                    geo: {
                        map: 'china',
                        aspectScale: 0.75,
                        zoom: 1.1,
                        roam: false,
                        itemStyle: {
                            normal: {
                                areaColor: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#09132c',
                                        },
                                        {
                                            offset: 1,
                                            color: '#274d68',
                                        },
                                    ],
                                    globalCoord: true,
                                },
                                shadowColor: 'rgb(58,115,192)',
                                shadowOffsetX: 10,
                                shadowOffsetY: 11,
                            },
                            emphasis: {
                                areaColor: '#2AB8FF',
                                borderWidth: 0,
                                color: 'green',
                                label: {
                                    show: false,
                                },
                            },
                        },
                        regions: [
                            {
                                name: '南海诸岛',
                                itemStyle: {
                                    areaColor: 'rgba(0, 10, 52, 1)',
                                    borderColor: 'rgba(0, 10, 52, 1)',
                                    normal: {
                                        opacity: 0,
                                        label: {
                                            show: false,
                                            color: '#009cc9',
                                        },
                                    },
                                },
                            },
                        ],
                    },
                    series: [
                        {
                            type: 'map',
                            roam: false,
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        color: '#fff',
                                    },
                                },
                                emphasis: {
                                    textStyle: {
                                        color: '#fff',
                                    },
                                },
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: 'rgb(147, 235, 248)',
                                    borderWidth: 1,
                                    areaColor: {
                                        type: 'radial',
                                        x: 0.5,
                                        y: 0.5,
                                        r: 0.8,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: '#09132c',
                                            },
                                            {
                                                offset: 1,
                                                color: '#274d68',
                                            },
                                        ],
                                        globalCoord: true,
                                    },
                                    color: 'rgb(73, 146, 255)',
                                },
                                emphasis: {
                                    areaColor: 'rgb(46,229,206)',
                                    borderWidth: 0.1,
                                },
                                color: 'rgb(73, 146, 255)',
                            },
                            zoom: 1.1,
                            map: 'china',
                        },
                        {
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            showEffectOn: 'render',
                            zlevel: 1,
                            rippleEffect: {
                                period: 15,
                                scale: 4,
                                brushType: 'fill',
                            },
                            hoverAnimation: true,
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    offset: [15, 0],
                                    color: '#1DE9B6',
                                    show: true,
                                },
                            },
                            itemStyle: {
                                normal: {
                                    color: 'rgb(124, 255, 178)',
                                    shadowBlur: 10,
                                    shadowColor: '#333',
                                },
                                color: 'rgb(124, 255, 178)',
                            },
                            symbolSize: 12,
                            data: [
                                {
                                    value: [118.8062, 31.9208],
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                },
                                {
                                    value: [127.9688, 45.368],
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                },
                                {
                                    value: [110.3467, 41.4899],
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                },
                                {
                                    value: [125.8154, 44.2584],
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                },
                                {
                                    value: [116.4551, 40.2539],
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                },
                                {
                                    value: [123.1238, 42.1216],
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                },
                                {
                                    value: [114.4995, 38.1006],
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                },
                                {
                                    value: [117.4219, 39.4189],
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                },
                                {
                                    value: [112.3352, 37.9413],
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                },
                                {
                                    value: [109.1162, 34.2004],
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                },
                                {
                                    value: [103.5901, 36.3043],
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                },
                                {
                                    value: [106.3586, 38.1775],
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                },
                                {
                                    value: [101.4038, 36.8207],
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                },
                                {
                                    value: [103.9526, 30.7617],
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                },
                                {
                                    value: [108.384366, 30.439702],
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                },
                                {
                                    value: [113.0823, 28.2568],
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                },
                                {
                                    value: [102.9199, 25.46639],
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                },
                                {
                                    value: [119.4543, 25.9222],
                                },
                            ],
                        },
                        {
                            type: 'lines',
                            zlevel: 2,
                            effect: {
                                show: true,
                                period: 4,
                                trailLength: 0.4,
                                symbol: 'arrow',
                                symbolSize: 7,
                            },
                            lineStyle: {
                                normal: {
                                    color: '#1DE9B6',
                                    width: 1,
                                    opacity: 0.1,
                                    curveness: 0.3,
                                },
                                color: 'rgb(253, 221, 96)',
                            },
                            data: [
                                {
                                    coords: [
                                        [118.8062, 31.9208],
                                        [119.4543, 25.9222],
                                    ],
                                    lineStyle: {
                                        color: 'rgb(253, 221, 96)',
                                    },
                                },
                                {
                                    coords: [
                                        [127.9688, 45.368],
                                        [119.4543, 25.9222],
                                    ],
                                    lineStyle: {
                                        color: 'rgb(253, 221, 96)',
                                    },
                                },
                                {
                                    coords: [
                                        [110.3467, 41.4899],
                                        [119.4543, 25.9222],
                                    ],
                                    lineStyle: {
                                        color: 'rgb(253, 221, 96)',
                                    },
                                },
                                {
                                    coords: [
                                        [125.8154, 44.2584],
                                        [119.4543, 25.9222],
                                    ],
                                    lineStyle: {
                                        color: 'rgb(253, 221, 96)',
                                    },
                                },
                                {
                                    coords: [
                                        [116.4551, 40.2539],
                                        [119.4543, 25.9222],
                                    ],
                                    lineStyle: {
                                        color: 'rgb(253, 221, 96)',
                                    },
                                },
                                {
                                    coords: [
                                        [123.1238, 42.1216],
                                        [119.4543, 25.9222],
                                    ],
                                    lineStyle: {
                                        color: 'rgb(253, 221, 96)',
                                    },
                                },
                                {
                                    coords: [
                                        [114.4995, 38.1006],
                                        [119.4543, 25.9222],
                                    ],
                                    lineStyle: {
                                        color: 'rgb(253, 221, 96)',
                                    },
                                },
                                {
                                    coords: [
                                        [117.4219, 39.4189],
                                        [119.4543, 25.9222],
                                    ],
                                    lineStyle: {
                                        color: 'rgb(253, 221, 96)',
                                    },
                                },
                                {
                                    coords: [
                                        [112.3352, 37.9413],
                                        [119.4543, 25.9222],
                                    ],
                                    lineStyle: {
                                        color: 'rgb(253, 221, 96)',
                                    },
                                },
                                {
                                    coords: [
                                        [109.1162, 34.2004],
                                        [119.4543, 25.9222],
                                    ],
                                    lineStyle: {
                                        color: 'rgb(253, 221, 96)',
                                    },
                                },
                                {
                                    coords: [
                                        [103.5901, 36.3043],
                                        [119.4543, 25.9222],
                                    ],
                                    lineStyle: {
                                        color: 'rgb(253, 221, 96)',
                                    },
                                },
                                {
                                    coords: [
                                        [106.3586, 38.1775],
                                        [119.4543, 25.9222],
                                    ],
                                    lineStyle: {
                                        color: 'rgb(253, 221, 96)',
                                    },
                                },
                                {
                                    coords: [
                                        [101.4038, 36.8207],
                                        [119.4543, 25.9222],
                                    ],
                                    lineStyle: {
                                        color: 'rgb(253, 221, 96)',
                                    },
                                },
                                {
                                    coords: [
                                        [103.9526, 30.7617],
                                        [119.4543, 25.9222],
                                    ],
                                    lineStyle: {
                                        color: 'rgb(253, 221, 96)',
                                    },
                                },
                                {
                                    coords: [
                                        [108.384366, 30.439702],
                                        [119.4543, 25.9222],
                                    ],
                                    lineStyle: {
                                        color: 'rgb(253, 221, 96)',
                                    },
                                },
                                {
                                    coords: [
                                        [113.0823, 28.2568],
                                        [119.4543, 25.9222],
                                    ],
                                    lineStyle: {
                                        color: 'rgb(253, 221, 96)',
                                    },
                                },
                                {
                                    coords: [
                                        [102.9199, 25.46639],
                                        [119.4543, 25.9222],
                                    ],
                                    lineStyle: {
                                        color: 'rgb(253, 221, 96)',
                                    },
                                },
                            ],
                        },
                    ],
                },
                sel168329732049140: {
                    color: ['#3D91F7', '#61BE67'],
                    tooltip: {},
                    legend: {
                        show: true,
                        icon: 'circle',
                        bottom: 30,
                        center: 0,
                        itemWidth: 14,
                        itemHeight: 14,
                        itemGap: 21,
                        orient: 'horizontal',
                        data: ['a', 'b'],
                        textStyle: {
                            fontSize: '70%',
                            color: '#fff',
                        },
                    },
                    radar: {
                        radius: '80%',
                        triggerEvent: true,
                        name: {
                            textStyle: {
                                color: '#fff',
                                fontSize: '13',
                                borderRadius: 3,
                                padding: [3, 5],
                            },
                        },
                        nameGap: '2',
                        indicator: [
                            {
                                name: '资金周转',
                                max: 6500,
                            },
                            {
                                name: '其他',
                                max: 16000,
                            },
                            {
                                name: '金融理财',
                                max: 30000,
                            },
                            {
                                name: '投资',
                                max: 38000,
                            },
                            {
                                name: '个人消费',
                                max: 52000,
                            },
                            {
                                name: '固定资产',
                                max: 25000,
                            },
                            {
                                name: '生产经营',
                                max: 25000,
                            },
                        ],
                        splitArea: {
                            areaStyle: {
                                color: [
                                    'rgba(222,134,85, 1)',
                                    'rgba(222,134,85, 0.8)',
                                    'rgba(222,134,85, 0.6)',
                                    'rgba(222,134,85, 0.4)',
                                    'rgba(222,134,85, 0.2)',
                                    'rgba(222,134,85, 0.1)',
                                ],
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                width: 2,
                                color: [
                                    'rgba(224,134,82, 1)',
                                    'rgba(224,134,82, 0.8)',
                                    'rgba(224,134,82, 0.6)',
                                    'rgba(224,134,82, 0.4)',
                                    'rgba(224,134,82, 0.2)',
                                    'rgba(224,134,82, 0.1)',
                                ],
                            },
                        },
                    },
                    series: [
                        {
                            name: '一级权重分析',
                            type: 'radar',
                            areaStyle: {
                                normal: {
                                    color: 'rgba(252,211,3, 0.3)',
                                },
                            },
                            symbolSize: 0,
                            lineStyle: {
                                normal: {
                                    color: 'rgba(252,211,3, 1)',
                                    width: 1,
                                },
                                color: 'rgb(73, 146, 255)',
                            },
                            data: [
                                {
                                    value: [
                                        4300, 10000, 28000, 35000, 50000, 19000,
                                        21000,
                                    ],
                                    name: '因素',
                                },
                            ],
                        },
                    ],
                },
                sel168329723799127: {
                    grid: {
                        left: '2%',
                        right: '2%',
                        bottom: '2%',
                        top: '2%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'none',
                        },
                    },
                    xAxis: {
                        show: false,
                        type: 'value',
                    },
                    yAxis: [
                        {
                            type: 'category',
                            inverse: true,
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff',
                                },
                                color: '#fff',
                            },
                            splitLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                            },
                            data: [
                                '安徽省',
                                '河南省',
                                '浙江省',
                                '湖北省',
                                '贵州省',
                                '江西省',
                                '江苏省',
                                '四川省',
                                '云南省',
                                '湖南省',
                            ],
                        },
                        {
                            type: 'category',
                            inverse: true,
                            axisTick: 'none',
                            axisLine: 'none',
                            show: true,
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    fontSize: '12',
                                },
                                color: '#fff',
                            },
                            data: [
                                239, 181, 154, 144, 135, 117, 74, 72, 67, 55,
                            ],
                        },
                    ],
                    series: [
                        {
                            name: '值',
                            type: 'bar',
                            zlevel: 1,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 30,
                                    color: 'rgb(73, 146, 255)',
                                },
                                color: 'rgb(73, 146, 255)',
                            },
                            barWidth: 20,
                            data: [
                                239, 181, 154, 144, 135, 117, 74, 72, 67, 55,
                            ],
                        },
                        {
                            name: '背景',
                            type: 'bar',
                            barWidth: 20,
                            barGap: '-100%',
                            data: [
                                239, 239, 239, 239, 239, 239, 239, 239, 239,
                                239,
                            ],
                            itemStyle: {
                                normal: {
                                    color: 'rgb(124, 255, 178)',
                                    barBorderRadius: 30,
                                },
                                color: 'rgb(124, 255, 178)',
                            },
                        },
                    ],
                },
                sel168329720491933: {
                    grid: [
                        {
                            x: '50%',
                            y: '7%',
                            width: '45%',
                            height: '90%',
                        },
                    ],
                    tooltip: {
                        formatter: '{b} ({c})',
                    },
                    xAxis: [
                        {
                            gridIndex: 0,
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                show: false,
                                color: '#fff',
                            },
                            splitLine: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                            },
                        },
                    ],
                    yAxis: [
                        {
                            gridIndex: 0,
                            interval: 0,
                            data: [
                                '原因10',
                                '原因9',
                                '原因8',
                                '原因7',
                                '原因6',
                                '原因5',
                                '原因4',
                                '原因3',
                                '原因2',
                                '原因1',
                            ],
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                show: true,
                                color: '#fff',
                            },
                            splitLine: {
                                show: false,
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#fff',
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            name: '各渠道投诉占比',
                            type: 'pie',
                            radius: '30%',
                            center: ['22%', '25%'],
                            color: [
                                '#86c9f4',
                                '#4da8ec',
                                '#3a91d2',
                                '#005fa6',
                                '#315f97',
                            ],
                            data: [
                                {
                                    value: 335,
                                    name: '客服电话',
                                },
                                {
                                    value: 310,
                                    name: '奥迪官网',
                                },
                                {
                                    value: 234,
                                    name: '媒体曝光',
                                },
                                {
                                    value: 135,
                                    name: '质检总局',
                                },
                                {
                                    value: 105,
                                    name: '其他',
                                },
                            ],
                            labelLine: {
                                normal: {
                                    show: false,
                                },
                            },
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: '{b} \n ({d}%)',
                                        textStyle: {
                                            color: '#fff',
                                        },
                                    },
                                    color: 'rgb(73, 146, 255)',
                                },
                                color: 'rgb(73, 146, 255)',
                            },
                        },
                        {
                            name: '各级别投诉占比',
                            type: 'pie',
                            radius: '30%',
                            center: ['22%', '75%'],
                            color: [
                                '#86c9f4',
                                '#4da8ec',
                                '#3a91d2',
                                '#005fa6',
                                '#315f97',
                            ],
                            labelLine: {
                                normal: {
                                    show: false,
                                },
                            },
                            data: [
                                {
                                    value: 335,
                                    name: 'A级',
                                },
                                {
                                    value: 310,
                                    name: 'B级',
                                },
                                {
                                    value: 234,
                                    name: 'C级',
                                },
                                {
                                    value: 135,
                                    name: 'D级',
                                },
                            ],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: '{b} \n ({d}%)',
                                        textStyle: {
                                            color: '#fff',
                                        },
                                    },
                                    color: 'rgb(124, 255, 178)',
                                },
                                color: 'rgb(124, 255, 178)',
                            },
                        },
                        {
                            name: '投诉原因TOP10',
                            type: 'bar',
                            xAxisIndex: 0,
                            yAxisIndex: 0,
                            barWidth: '45%',
                            itemStyle: {
                                normal: {
                                    color: 'rgb(253, 221, 96)',
                                },
                                color: 'rgb(253, 221, 96)',
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    textStyle: {
                                        color: '#fff',
                                    },
                                },
                            },
                            data: [
                                133, 176, 196, 214, 232, 259, 262, 324, 370,
                                389,
                            ],
                        },
                    ],
                },
                sel168329713466813: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        },
                    },
                    grid: {
                        top: '15%',
                        right: '3%',
                        left: '5%',
                        bottom: '12%',
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['制造业', '建筑业', '农林牧渔'],
                            axisLine: {
                                lineStyle: {
                                    color: '#fff',
                                },
                            },
                            axisLabel: {
                                margin: 10,
                                color: '#fff',
                                textStyle: {
                                    fontSize: 14,
                                    color: '#fff',
                                },
                            },
                        },
                    ],
                    yAxis: [
                        {
                            name: '单位：万元',
                            axisLabel: {
                                formatter: '{value}',
                                color: '#fff',
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#fff',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: 'rgba(255,255,255,0.12)',
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            type: 'bar',
                            data: [5000, 2600, 2600],
                            barWidth: '20px',
                            itemStyle: {
                                normal: {
                                    color: 'rgb(73, 146, 255)',
                                    barBorderRadius: [30, 30, 30, 30],
                                    shadowColor: 'rgba(0,160,221,1)',
                                    shadowBlur: 4,
                                },
                                color: 'rgb(73, 146, 255)',
                            },
                            label: {
                                normal: {
                                    show: true,
                                    lineHeight: 30,
                                    width: 80,
                                    height: 30,
                                    backgroundColor: 'rgba(0,160,221,0.1)',
                                    borderRadius: 200,
                                    position: ['-8', '-60'],
                                    distance: 1,
                                    formatter:
                                        '    {d|●}, {a|{c}}     \n,    {b|}',
                                    rich: {
                                        d: {
                                            color: '#3CDDCF',
                                        },
                                        a: {
                                            color: '#fff',
                                            align: 'center',
                                        },
                                        b: {
                                            width: 1,
                                            height: 30,
                                            borderWidth: 1,
                                            borderColor: '#234e6c',
                                            align: 'left',
                                        },
                                    },
                                },
                            },
                        },
                    ],
                },
                sel16832970455726: {
                    color: ['#ffd285', '#ff733f', '#ec4863'],
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        x: 300,
                        top: '7%',
                        textStyle: {
                            color: '#fff',
                        },
                        data: ['在大理', '标准版', '潍V'],
                    },
                    grid: {
                        left: '1%',
                        right: '35%',
                        top: '16%',
                        bottom: '6%',
                        containLabel: true,
                    },
                    toolbox: {
                        show: false,
                        feature: {
                            saveAsImage: {},
                        },
                    },
                    xAxis: {
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                            },
                            color: '#fff',
                        },
                        boundaryGap: false,
                        data: [
                            '周一',
                            '周二',
                            '周三',
                            '周四',
                            '周五',
                            '周六',
                            '周日',
                        ],
                    },
                    yAxis: {
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                            },
                            color: '#fff',
                        },
                        type: 'value',
                    },
                    series: [
                        {
                            name: '在大理',
                            smooth: true,
                            type: 'line',
                            symbolSize: 8,
                            symbol: 'circle',
                            data: [90, 50, 39, 50, 120, 82, 80],
                        },
                        {
                            name: '标准版',
                            smooth: true,
                            type: 'line',
                            symbolSize: 8,
                            symbol: 'circle',
                            data: [70, 50, 50, 87, 90, 80, 70],
                        },
                        {
                            name: '潍V',
                            smooth: true,
                            type: 'line',
                            symbolSize: 8,
                            symbol: 'circle',
                            data: [290, 200, 20, 132, 15, 200, 90],
                        },
                        {
                            type: 'pie',
                            center: ['83%', '33%'],
                            radius: ['25%', '30%'],
                            label: {
                                normal: {
                                    position: 'center',
                                },
                            },
                            data: [
                                {
                                    value: 335,
                                    name: '用户来源分析',
                                    itemStyle: {
                                        normal: {
                                            color: 'rgb(255, 110, 118)',
                                        },
                                        color: 'rgb(255, 110, 118)',
                                    },
                                    label: {
                                        normal: {
                                            formatter: '{d} %',
                                            textStyle: {
                                                color: '#fff',
                                                fontSize: 20,
                                            },
                                        },
                                    },
                                },
                                {
                                    value: 180,
                                    name: '占位',
                                    tooltip: {
                                        show: false,
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: 'rgb(255, 110, 118)',
                                        },
                                        color: 'rgb(255, 110, 118)',
                                    },
                                    label: {
                                        normal: {
                                            textStyle: {
                                                color: '#fff',
                                            },
                                            formatter: '\n手机号注册',
                                        },
                                    },
                                },
                            ],
                        },
                        {
                            type: 'pie',
                            center: ['83%', '72%'],
                            radius: ['25%', '30%'],
                            label: {
                                normal: {
                                    position: 'center',
                                },
                            },
                            data: [
                                {
                                    value: 435,
                                    name: '用户来源分析',
                                    itemStyle: {
                                        normal: {
                                            color: 'rgb(88, 217, 249)',
                                        },
                                        color: 'rgb(88, 217, 249)',
                                    },
                                    label: {
                                        normal: {
                                            formatter: '{d} %',
                                            textStyle: {
                                                color: '#fff',
                                                fontSize: 20,
                                            },
                                        },
                                    },
                                },
                                {
                                    value: 100,
                                    name: '占位',
                                    tooltip: {
                                        show: false,
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: 'rgb(88, 217, 249)',
                                        },
                                        color: 'rgb(88, 217, 249)',
                                    },
                                    label: {
                                        normal: {
                                            textStyle: {
                                                color: '#fff',
                                            },
                                            formatter: '\n三方快捷登陆',
                                        },
                                    },
                                },
                            ],
                        },
                    ],
                },
                sel168329701648200: {
                    title: {
                        text: '',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 16,
                            color: '#fff',
                        },
                    },
                    series: [
                        {
                            type: 'liquidFill',
                            radius: '45%',
                            center: ['50%', '50%'],
                            data: [0.5, 0.5, 0.5],
                            backgroundStyle: {
                                borderWidth: 1,
                                color: 'rgb(255,0,255,0.1)',
                            },
                            label: {
                                normal: {
                                    formatter: '50.00%',
                                    textStyle: {
                                        fontSize: 20,
                                        color: '#fff',
                                    },
                                },
                            },
                            outline: {
                                show: false,
                            },
                        },
                        {
                            type: 'pie',
                            center: ['50%', '50%'],
                            radius: ['50%', '52%'],
                            hoverAnimation: false,
                            data: [
                                {
                                    name: '',
                                    value: 500,
                                    labelLine: {
                                        show: false,
                                    },
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                    emphasis: {
                                        labelLine: {
                                            show: false,
                                        },
                                        itemStyle: {
                                            color: 'rgb(124, 255, 178)',
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: 4,
                                    labelLine: {
                                        show: false,
                                    },
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                        normal: {
                                            color: 'rgb(124, 255, 178)',
                                            borderColor: '#5886f0',
                                            borderWidth: 20,
                                        },
                                    },
                                    label: {
                                        borderRadius: '100%',
                                    },
                                    emphasis: {
                                        labelLine: {
                                            show: false,
                                        },
                                        itemStyle: {
                                            color: 'rgb(124, 255, 178)',
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: 4,
                                    labelLine: {
                                        show: false,
                                    },
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                    emphasis: {
                                        labelLine: {
                                            show: false,
                                        },
                                        itemStyle: {
                                            color: 'rgb(124, 255, 178)',
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: 88,
                                    itemStyle: {
                                        color: 'rgb(124, 255, 178)',
                                    },
                                    label: {
                                        show: false,
                                    },
                                    labelLine: {
                                        show: false,
                                    },
                                    emphasis: {
                                        labelLine: {
                                            show: false,
                                        },
                                        itemStyle: {
                                            color: 'rgb(124, 255, 178)',
                                        },
                                    },
                                },
                            ],
                        },
                    ],
                },
            },
        }
    },
    methods: {
        created_sys() {
            ///系统方法 判断页面大小 使其自动适应
            let $this = this
            this.w = this.w === undefined ? 1920 : this.w
            $this.css = `  width: ${$this.w}px;height: ${$this.h}px; ${
                $this.bg === ''
                    ? ''
                    : 'background-image:url(' +
                      $this.bg +
                      ');background-size: contain;'
            }  transform: scale(${document.body.clientWidth / $this.w});  ${
                $this.bgColor === ''
                    ? ''
                    : 'background-color:' +
                      $this.bgColor +
                      ';left:calc( 50% - ' +
                      $this.w / 2 +
                      'px);'
            }`

            window.addEventListener('resize', () => {
                $this.css = `  width: ${$this.w}px;height: ${$this.h}px; ${
                    $this.bg === ''
                        ? ''
                        : 'background-image:url(' +
                          $this.bg +
                          ');    background-size: contain;'
                }  transform: scale(${document.body.clientWidth / $this.w}); ${
                    $this.bgColor === ''
                        ? ''
                        : 'background-color:' + $this.bgColor + ';'
                }`
            })
            $this.css = `transform: scale(${
                document.body.clientWidth / $this.w
            })`
        },
        funmounted_sys() {},
    },
    created() {
        this.created_sys()
        if (this.funmounted_sys !== undefined) {
            this.funmounted_sys()
        }
    },
    components: {
        myechart,
        titlecontrol,
        horseindex,
        textareaindex,
        backgroundunit1,
        backgroundunit2,
        backgroundunit3,
        backgroundunit4,
        backgroundunit5,
        backgroundunit7,
        backgroundunit8,
        backgroundunit9,
        backgroundunit10,
        backgroundunit11,
        backgroundunit12,
        bigimg,
        myfabric,
        scrollgridlist,
        scrollgridcolumn,
    },
}
</script>
<style scoped>
.dv-full-screen-container {
    transform: scale(1);
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    transform-origin: left top;
    z-index: 499;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 1920px;
    height: 1080px;
    background-color: '#040404';
    background-size: cover;
}

.bigitem {
    position: absolute;
    will-change: transform;
    overflow: hidden;
}

.layouttable {
    height: 100%;
    display: flex;
}

.layouttable .layouttable-item {
    height: 100%;
    position: relative;
    float: left;
}

.itemcontent {
    width: 100%;
    height: 100%;
}
</style>
<style scoped></style>